<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../dist//vue.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script> -->
    <!-- <div id="app">
        <my-button></my-button>
    </div> -->
    <div id="root"></div>
    <script>
        //根实例
        //组件三大特性 自定义标签 组件里面有自己的属性和事件 组件的插槽

        //声明组件 全局组件 Vue.extend
        Vue.component('my-button',{
            template:'<button>全局</button>'
        })

        //会先把模版->ast语法树->生成虚拟dom->需要对元素再次分类 分类成组件的虚拟节点
        //在模版渲染的时候 需要查找my-button组件
        let Sub = Vue.extend({
            template:'<div>子组件<my-button></my-button></div>',
            components:{
                'my-button':{
                    template:'<button>子组件自己声明的button</button>'
                }
            }
        });
        new Sub().$mount('#root');

        // Vue.component('my-button',{
        //     template:'<button>点我啊</button>'
        // })
        // Vue.component('my-button',Vue.extend({
        //     template:'<button>点我啊</button>'
        // }))
        // const vm = new Vue({
        //     el: "#app",
        //     data:{
        //         name:'zf'
        //     },
        //     comments:{//js的原型链 内部可能是一个继承的模型1
        //         'my-button':{
        //             template:'<button>点我啊</button>'
        //         }
        //     }
        // })
    </script>

</body>
</html>